<template>
    <div style="width: 100%">
            <el-carousel trigger="click" height="600pt">
                <el-carousel-item>
                    <div class="homepannel">
                        <div class="honeinfo">
                            <div class="homebig"><span class="blue">家幼百宝箱</span>园所端，你想要的这里都有，协助你快速提升办园质。</div>
                            <div class="homesmall">家幼百宝箱，汇集知识、教育为一体的一款专为幼儿家长的产品家幼百宝箱，汇集知识、教育为一体的一款专为幼儿家长的产品</div>
                            <div class="downloadbtn">立即下载</div>
                        </div>
                        <div class="homeimg">
                            <img class="i1" src="../assets/img/phone1.png">
                            <img class="i2" src="../assets/img/phone2.png">
                            <img class="i3" src="../assets/img/phone3.png">
                        </div>
                    </div>
                </el-carousel-item>
                <el-carousel-item>
                    <div class="homepannel">
                        <div class="honeinfo">
                            <div class="homebig">家幼<span class="orange">百宝箱</span>，汇集知识、教育的一款专为幼儿家长的产品</div>
                            <div class="homesmall">家幼百宝箱，汇集知识、教育为一体的一款专为幼儿家长的产品家幼百宝箱，汇集知识、教育为一体的一款专为幼儿家长的产品</div>
                            <div class="downloadbtn">立即下载</div>
                        </div>
                        <div class="homeimg">
                            <img class="i4" src="../assets/img/back2.png">
                        </div>
                    </div>
                </el-carousel-item>
            </el-carousel>


    </div>
</template>
<script>
    export default {
        data(){
            return{

            }
        },
        components: {
        },
        methods:{

        },
        mounted() {

        },
        created() {

        }
    }
</script>
<style scoped lang="scss">

.homepannel{
    position: relative;
    padding-top: 20pt;
    text-align: left;
    background-image: url("../assets/img/background.png");
    background-size: 100% auto;
    background-repeat: repeat-y;
}
.honeinfo{
    display:inline-block;
    width: 40%;
    padding-left: 10%;
    margin-top: 100px;
}
.homeimg{
    display:inline-block;
    width: 60%;
    float: right;
    position: relative;
}
.homeimg .i4{
    position: absolute;
    top: 0;
    right: 0;
    width: 80%;
    z-index: -1;
}
.homeimg .i3{
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    z-index: -1;
    opacity: 0.9;
}
.homeimg .i2{
    position: absolute;
    right: 0;
    z-index: 1;
    width: 47%;
    top:-5%;
}
.homeimg .i1{
    position: absolute;
    width: 40%;
    top:50pt;
    z-index: 2;
    right: 35%;
}
.homebig{
    color:#191C20;
    font-size: 36pt;
    line-height:55pt;
    font-weight: bold;
}
.homebig .blue{
    color:#339FFD;
    font-size: 36pt;
    line-height:55pt;
    font-weight: bold;
}
.homebig .orange{
    color:#FF6828;
    font-size: 36pt;
    line-height:55pt;
}
.homesmall{
    color: #191C20;
    font-size: 12pt;
    line-height: 20pt;
    margin-top: 18pt;
}
.downloadbtn{
    cursor: pointer;
    color: #fff;
    background-color: #339FFD;
    font-size: 14pt;
    line-height: 45pt;
    width: 120pt;
    text-align: center;
    display: inline-block;
    margin-top: 60pt;
    border-radius: 6pt;
    box-shadow: 0px 0px 5pt #339FFD;
}


</style>
<style>
    .el-carousel__indicators{
        left: 11% !important;
        top :550pt!important;
    }
    .el-carousel__button{
        background-color: #999!important;
    }

</style>
